<template>
	<view class="order-status">
		<view class="tabbar-container">
			<view @tap="tabbarChange(index)" class="item" :class="index === current?'active':''" v-for="(item,index) in tabbarList" :key="item.name">
				{{item.name}}
			</view>
		</view>
		<!-- 订单列表 -->
		<view v-if="current!==4" class="order-container">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="title">
					订单编号：{{item.order.orderSn}}
					{{item.order.status | statusText}}
				</view>
				<view class="order-list" v-for="productItem in item.items" :key="productItem.id">
					{{productItem.productName}} -- {{productItem.productPrice}} -- {{productItem.productQuantity}}
					<view v-if="item.order.status === 2">
						<button size="mini" @tap="goReturnOrder(productItem.orderId)">退货</button>
					</view>
				</view>
				<view class="footer">
					时间：{{item.order.createTime}}
					合计：{{item.order.totalAmount}}
					<view v-if="item.order.status === 0"> 
						<button size="mini">取消订单</button>
						<button size="mini">付款</button>
					</view>				
					<view v-if="item.order.status === 2"> 
						
						<button size="mini">确认收货</button>
					</view>
					<view v-if="item.order.status === 3 || item.order.status==4"> 
						<button size="mini">订单完成，删除记录</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 退单列表 -->
		<view v-else class="order-container">
			<view class="item" v-for="item in returnOrderList" :key="item.id">
				<view class="title">
					订单编号：{{item.orderSn}}
					{{item.status | orderProcessText}}
				</view>
				<view class="order-list"  >
					{{item.productName}} -- {{item.productPrice}} -- {{item.productCount}}
				</view>
				<view class="footer">
					时间：{{item.createTime}}
					合计：{{item.returnAmount}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findAllOrders ,
		orderReturnApplys
	} from '@/api/user/order.js'
	export default {
		name:"OrderStatus",
		data() {
			return {
				current:0,
				orderList:[],
				returnOrderList:[],
				tabbarList:[
					{
						name:"待付款"
					}
					,
					{
						name:"已付款"	
					},
					{
						name:"已发货"	
					},
					{
						name:"已收货"	
					},
					{
						name:"售后"	
					},
					
				]
			};
		},
		onLoad(){
			this.getAllOrderList()
			this.getReturnOrderList()
		},
		computed:{
			list(){
				if(this.current === 3){
					return this.orderList.filter(item=>item.order.status === 3 || item.order.status===4)
				}else if(this.current !==4) {
					return this.orderList.filter(item=>this.current === item.order.status)	
				}
			}
		},
		 filters:{
		
			statusText(val){
				if(val == 0){
					return "未付款"
				}else if(val == 1){
					return "已付款,等待发货"
				}else if(val == 2){
					return "已发货"
				}else if(val == 3){
					return "已收货"
				}else if(val == 4){
					return "已退单"
				}else{
					return "无效订单"
				}

			},
			//已退款和已拒绝颜色需要展示成红色
			orderProcessText(process) {
				var text = '等待处理';
				switch (JSON.stringify(process)) {
					case '0':
						text = '等待处理';
						break;
					case '1':
						text = '确认退货,等待用户发货';
						break;
					case '2':
						text = '已退款';
						break;
					case '3':
						text = '已拒绝';
						break;
					case '9':
						text = '拒绝退货';
						break;

					default:
						break;
				}
				return text;
			}
	
		},
		methods:{
			tabbarChange(idx){
				this.current = idx
			},
			async getAllOrderList(){
				const res = await findAllOrders()
				this.orderList = res.data.orderList
			},
			async getReturnOrderList(){
				const res = await orderReturnApplys()
				this.returnOrderList = res.data.items
			},
			goReturnOrder(orderid){
				uni.navigateTo({
					url:`/pages/user/returnOrder/returnOrder?id=${orderid}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.order-status{
	padding-top: 120rpx;
	height: 100vh;
	overflow: auto;
	background-color: #f1ece7;
	.tabbar-container{
		position: fixed;
		top: 80rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		background-color: #354e44;
		.item{
			display: flex;
			align-items: center;
			height: calc(100% - 1rpx);
			color: #fff;
			border-bottom: 1rpx solid transparent;
		}
		.active{
			color: red;
			border-color: red;
		}
	}
	.order-container{
		.item{
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}
	}
}
</style>
